<template>
  <view class="content">
    <!-- #ifdef MP-WEIXIN -->
    <top-nav></top-nav>
    <!-- #endif -->
     <common-header class="header" ></common-header>
     <view class="list-main">
       <view class="list-l">
         <view class="list-tags" v-for="(item,index) in leftCategorys" :key="index" @click="refreshRightCategorys(index,item)">
           <view class="name" :class="index == current ?'active':''">{{item.categoryName}}</view>
         </view>
       </view>
       <view class="list-r">
         <scroll-view scroll-y="true" :style="{height:scrollHeight}">
             <view class="list-banner">
                 <image src="../../static/logo.png" mode="aspectFill" class="banner"></image>
             </view>
             <view class="list-col">
               <view class="list-item" v-for="(item,index) in rightCategorys" :key="index">
                 <view class="list-icon" >
                   <image :src="item.thumbnail" mode="aspectFill" class="img"></image>
                 </view>
                 <view class="text">
                   {{item.categoryName}}
                 </view>
               </view>
             </view>
           
         </scroll-view>
       </view>
     </view>
  </view>
</template>
<script>
  import topNav from '@/components/top-nav/top-nav.vue'
  import commonHeader from '@/components/header/header.vue'
  import {getFirstCategorys,getSecondCategorys} from '@/api/course.js'
  import {mixin} from '@/mixins/mixin.js'
  export default {
    components:{
      commonHeader,
      topNav
    },
    mixins:[mixin],
    data(){
      return {
        curent:0,
        leftCategorys:[],
        current:0,
        rightCategorys:[],
        prevIndex:-1,
        scrollHeight: '500rpx'
      }
    },
    onReady() {
      this.getLeftCategorys()
      this.getRightCategorys({
           categoryId:-1
         }),
      /* 计算内容滑动的高度 */
      this.getScrollViewHeight('.header').then(res=>{
        this.scrollHeight = res
      })
    },
    methods:{
      // 获取左侧列表
      async getLeftCategorys() {
         const {data} = await getFirstCategorys()
         this.leftCategorys = data.list
         this.leftCategorys.unshift({
           sort:0,
           categoryName:'全部'
         })
      },
      // 获取右侧列表
      async getRightCategorys(query) {
         const {data} = await getSecondCategorys(query)
         this.rightCategorys = data.list
         console.log(data.list,'second');
      },
      refreshRightCategorys(index,item) {
        // 记录上次发送的信息，如果相同，则不再请求
        if(this.prevIndex == index) return
        if(index == 0) {
          this.getRightCategorys({
           categoryId:-1
         })
        }else {
          this.getRightCategorys({
            categoryId:item.id
          })
        }
        this.prevIndex = this.current = index
      }
    }
  }
</script>
<style lang="scss">
  .content {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
    padding: 0 28rpx;
  }
  
  .text-area {
  	display: flex;
  	justify-content: center;
  }
  
  .header {
    width: 100%;
  }
  .list-main {
    width: 100%;
    display: flex;
    align-items: flex-start;
    .list-l {
      width: 200rpx;
      background: rgba(240,240,240,0.7);
      .list-tags {
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        align-items: center;
        padding-left: 1px;
        box-sizing: border-box;
        .name {
          border-left: 3px solid red;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          color: #333;
          width: 100%;
          text-align: center;
          border-radius: 2px;
        }
        .name.active {
          color: red;
        }
      }
    }
    .list-r {
      margin-left: 20rpx;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .list-banner {
        width: 100%;
        height: 160rpx;
        margin-bottom: 30rpx;
        .banner {
          width: 100%;
          height: 100%;
        }
      }
      .list-col {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .list-col .list-item {
         width: 28%;
         height: 160rpx;
         margin-right: 8%;
          margin-bottom: 10rpx;
        &:nth-child(3n) {
          margin-right: 0;
        }
        .list-icon {
          width: 76%;
          height: 101rpx;
          margin: 0 auto;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          color: #333;
          line-height: 36rpx;
          font-size: 24rpx;
          text-align: center;
          margin-top: 8rpx;
        }
      }
    }
  }
</style>